<form class="form-horizontal" name="registryFormQuay" ng-submit="$ctrl.formAction()">
  <div class="col-sm-12 form-section-title"> Quay account details </div>
  <!-- credentials-user -->
  <div class="form-group">
    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
    <div class="col-sm-9 col-lg-10">
      <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required auto-focus />
    </div>
  </div>
  <div class="form-group" ng-show="registryFormQuay.registry_username.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="registryFormQuay.registry_username.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- !credentials-user -->
  <!-- credentials-password -->
  <div class="form-group">
    <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
    <div class="col-sm-9 col-lg-10">
      <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
    </div>
  </div>
  <div class="form-group" ng-show="registryFormQuay.registry_password.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="registryFormQuay.registry_password.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- !credentials-password -->

  <!-- organisation-checkbox -->
  <div class="form-group">
    <div class="col-sm-12">
      <label class="control-label text-left"> Use organisation registry </label>
      <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.model.Quay.useOrganisation" /><i></i> </label>
    </div>
  </div>
  <!-- !organisation-checkbox -->
  <div ng-if="$ctrl.model.Quay.useOrganisation">
    <!-- organisation_name -->
    <div class="form-group">
      <label for="organisation_name" class="col-sm-3 col-lg-2 control-label text-left">Organisation name</label>
      <div class="col-sm-9 col-lg-10">
        <input type="text" class="form-control" id="organisation_name" name="organisation_name" ng-model="$ctrl.model.Quay.organisationName" required />
      </div>
    </div>
    <div class="form-group" ng-show="registryFormQuay.organisation_name.$invalid">
      <div class="col-sm-12 small text-warning">
        <div ng-messages="registryFormQuay.organisation_name.$error">
          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
        </div>
      </div>
    </div>
    <!-- !organisation_name -->
  </div>

  <!-- actions -->
  <div class="col-sm-12 form-section-title"> Actions </div>
  <div class="form-group">
    <div class="col-sm-12">
      <button
        type="submit"
        class="btn btn-primary btn-sm"
        ng-disabled="$ctrl.actionInProgress || !registryFormQuay.$valid"
        button-spinner="$ctrl.actionInProgress"
        analytics-on
        analytics-category="portainer"
        analytics-event="portainer-registry-creation"
        analytics-properties="{ metadata: { type: 'quay' } }"
      >
        <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
        <span ng-show="$ctrl.actionInProgress">In progress...</span>
      </button>
    </div>
  </div>
  <!-- !actions -->
</form>
